<template>
	<view class="yhqlist">
		<radio-group name="yhq_ids">
			<label class="item" v-for="(item, i) in list" :key="i" @click="handleItem(item)">
				<!-- :style="{ background: item.color }" -->
				<view class="lbox" >
					<text :style="[priceStyle(item)]">{{ item.money || item.jian }}</text>
					<text v-if="Number(item.man)">满{{ item.man }}元可用</text>
					<text v-else>无门槛</text>
				</view>
				<view class="rbox">
					<text>{{ item.title }}</text>
					<text >{{ $u.timeFormat(item.startTime, 'yyyy-mm-dd') }} 至 {{ $u.timeFormat(item.endTime, 'yyyy-mm-dd') }}</text>
				</view>
				<view class="rrbox" v-if="goods">
				<!-- 	<radio v-if="btnDisabled(item)" :checked="checkedItem.id === item.id" :disabled="isDisabled(item)" />
					<button v-else :disabled="btnDisabled(item)" @click="lingqu(item.lingqu_id)">领取</button> -->
					<button v-if="item.if_lingqu" disabled >已领过</button>
					<button v-else-if="item.if_ke_lingqu" :disabled="btnDisabled(item)" @click="lingqu(item.lingqu_id)">领取</button>
				</view>
				<view class="rrbox" v-else>
					<radio :checked="checkedItem.id === item.id" :disabled="isDisabled(item)" />
				</view>
			</label>
		</radio-group>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'yhqlist',
	computed: {
		...mapState(['checkedItem']),
		priceStyle() {
			return (item) => {
				let size = `30rpx`;
				let max = 4;
				if (item.money) {
					if (`${item.money}`.length > max) {
						return { fontSize: size };
					}
				}
				if (item.jian) {
					if (`${item.jian}`.length > max) {
						return { fontSize: size };
					}
				}
			};
		},
		btnDisabled(){
			return (item) => {
				if(item.if_ke_lingqu){
					if(item.lingqu_id){
						return false;
					}else{
						return true;
					}
				}else{
					return true;
				}
			}
		},
		isDisabled() {
			return (item) => {
				if (item.money) {
					if (parseFloat(item.money) >= parseFloat(this.needPay)) {
						return true;
					}else{
						return false;
					}
				}
				if (item.jian) {
					if (parseFloat(item.jian) >= parseFloat(this.needPay)) {
						return true;
					}else{
						return false;
					}
				}
				// if (item.hasOwnProperty('if_lingqu')) {
				
				// } else {
				// 	return false;
				// }
			};
		}
	},
	props: {
		goods: {
			type: Boolean,
			default: false
		},
		needPay: {
			type: Number | String,
			default: 0
		},
		list: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		lingqu(id) {
			this.$http.getJson('users_yhqLingqu', { id }).then((res) => {
				this.msg(res.message);
				if (res.code == 1) {
					this.$app.$emit('update')
				}
			});
		},
		handleItem(item) {
			if (this.isDisabled(item)) {
				this.msg('此优惠券，未满足使用条件');
				return;
			}
			this.$store.state.checkedItem = item;
			this.$emit('getItem', item);
		}
	}
};
</script>

<style lang="less" scoped>
.yhqlist {
	.item + .item {
		margin-top: 16rpx;
	}
	.item {
		position: relative;
		display: flex;
		height: 262rpx;

		background: #ffffff;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		.lbox {
			.flex-center-y();
			width: 220rpx;
			height: 262rpx;
			padding: 72rpx 0;
			flex-shrink: 0;
			background: linear-gradient(134deg, #ff8f8f 0%, #f74e3b 100%);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			text-align: center;
			text:nth-of-type(1) {
				font-size: 72rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #ffffff;
				&:before {
					content: '￥';
					font-size: 36rpx;
				}
			}
			text:nth-of-type(2) {
				margin-top: 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
			}
		}
		.rrbox {
			.fix-c-y();
			position: absolute;
			right: 10rpx;
			// top: 10rpx;
			.flex-center-y();
			// padding-right: 10rpx;
			button{
				min-width: 90rpx;
				height: 64rpx;
				background: #e54e4e;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				white-space: nowrap
			}
		}
		.rbox {
			.flex-center-y();
			flex: 1;
			align-items: flex-start;
			justify-content: space-between;
			padding: 60rpx 26rpx;
			text:nth-of-type(1) {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #000000;
			}
			text:nth-of-type(2) {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
		}
	}
}
</style>
